<template>
	<div>
		<div class="tabbar">
			<ul>
				<li v-for="(item,index) in routerList" :key="index" @click="switchTab(item.path)">
					<img :src="$route.path.includes(item.path) ?item.selected:item.active" alt="" />
					<span :class="$route.path.includes(item.path)?'active':''">{{item.title}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export  default {
		name:'Tabbar',
		data() {
			return {
				routerList:[
					{
						title:'首页',
						path:'/Home',
						active:'/home.png',
						selected:'/home-select.png',
					},
					{
						title:'分类',
						path:'/List',
						active:'/list.png',
						selected:'/list-select.png',
					},
					{
						title:'购物车',
						path:'/Cart',
						active:'/cart.png',
						selected:'/cart-select.png',
					},
					{
						title:'我的',
						path:'/My',
						active:'/my.png',
						selected:'/my-select.png',
					},
					
				]
			}
		},
		methods:{
			switchTab(path){
				//判断是否点击的是同一个路由
				if(this.$route.path == path) return;
				//对应跳转页面 replace是跳转并关闭该页面
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped>
	.tabbar{
		position: fixed;
		left: 0;
		bottom:0;
		z-index:999;
		width: 100%;
		height: 3.75rem;
		background-color: #fff;
	}
	.tabbar ul{
		display:flex; 
		justify-content:space-around;
		align-items:center;
		width: 100%;
		height: 100%;
	
	}
	.tabbar ul li{
		display:flex;  
		flex-direction:column;
		justify-content: center;
		text-align: center;
		
	}
	.tabbar ul li img{
		width: 1.9375rem;
		height: 1.9375rem;
	}
	.tabbar ul li span{
		font: size 1rem;
	}
	::v-deep.tabbar{
		border-top: 0.0625rem solid #ccc;
	}
	.active{
		color: green;
	}
</style>